<template>
  <div class="page-warp">
    <div class="top-wrap" style="display: flex; align-items: center">
      <block-title style="margin: 0 10px 0 0">车间列表</block-title>
      <div class="workshop-list">
        <div
          @click="onWorkshopSelected(index)"
          v-for="(item, index) in workshops"
          :key="index"
          class="workshop-list-item"
          :style="currentWorkshop == index ? 'background:#409EFF' : 'background:#FFF'"
        >
          <i class="el-icon-s-home icon" :style="currentWorkshop == index ? 'color:#FFF' : 'color:#409EFF'" />
          <span class="label" :style="currentWorkshop == index ? 'color:#FFF' : 'color:#409EFF'">{{ item.label }}</span>
        </div>
      </div>
    </div>

    <div class="main-wrap">
      <div class="left-wrap" style="flex: 1; border-right: 1px solid #e1e1e1; position: relative">
        <div class="state-tips">
          机台状态
          <div class="color-tag" style="background: #30b08f"></div>
          运行
          <div class="color-tag" style="background: #fec171"></div>
          落纱
          <div class="color-tag" style="background: #555"></div>
          停机
          <div class="color-tag" style="background: #e65d6e"></div>
          离线
        </div>
        <block-title style="margin-top: 14px">机台列表</block-title>
        <div class="machine-list">
          <template v-if="currentMac">
            <div v-for="(mac, inx) in machineLis" :key="inx" class="machine" @click="handleMachineSelected(inx)">
              <div :style="currentMac == inx ? machineActiveStyle : ''" class="machine-inner">
                <div class="left">
                  <div class="img"></div>
                  <div class="machineNo">{{ '' }}</div>
                </div>
                <div class="mid">
                  <div class="variety">{{ mac.id }}</div>
                  <div class="production">产量:{{ mac.RealProduct }}KG</div>
                </div>
                <div class="status" :style="{ background: stateColor[mac.macStatus] }"></div>
              </div>
            </div>
          </template>
          <div v-else style="margin-top: 80px; width: 100%; text-align: center; color: red">抱歉！暂无数据</div>
        </div>
      </div>
      <div class="right-wrap" style="width: 800px; padding: 0 12px; height: calc(100vh - 200px); overflow: auto">
        <template v-if="currentMac">
          <block-title style="margin-top: 14px">机台详情-{{ currentMac || '' }}</block-title>
          <div class="machine-detail">
            <template v-for="(group, gname) in formConfig">
              <block-title style="margin-top: 14px" :key="'b' + gname">{{ group.label }}</block-title>
              <div class="machine-group" :key="gname">
                <div class="opt" v-for="(item, inx) in group.params" :key="inx">
                  <div class="left">{{ item.label }}</div>
                  <div class="right">{{ machineLis[currentMac][item.column] }}</div>
                  <div></div>
                </div>
              </div>
            </template>
          </div>
        </template>
        <div v-else style="margin-top: 80px; width: 100%; text-align: center; color: red">抱歉！暂无数据</div>
      </div>
      <div class="bottom-wrap"></div>
    </div>
  </div>
</template>
<script>
import { updateArticle } from '@/api/article'
import { formConfig } from './config'
export default {
  name: 'MachineStatus',
  data() {
    return {
      client: null,
      connecting: false,
      retryTimes: 0,
      stateColor: ['#30B08F', '#FEC171', '#555', '#E65D6E', '#30B08F'],
      currentWorkshop: 0,
      workshops: [{ label: '01车间' }, { label: '02车间' }, { label: '03车间' }],
      currentMac: null,
      machineLis: {},
      title: 'ffffffffffffffffffff',
      machineActiveStyle: {
        background: '#DDD',
        'box-shadow': '6px 6px 6px rgba(0, 0, 0, 0.32),6px 6px 6px rgba(0, 0, 0, 0.32) ',
      },
      machineDetail: {},
      formConfig,
    }
  },
  computed: {},
  created() {
    console.log('call created')
  },
  mounted() {
    console.log('call mounted')
    this.$EVBUS.$on('MachineStatus', (data) => {
      const { MainAxle, L_Doff, R_Doff } = data
      let status = -1
      if (MainAxle == 0) {
        status = 2 //停机
      } else if (L_Doff > 0 || R_Doff > 0) {
        status = 1 //落纱
      } else {
        status = 0 //运行
      }
      this.$set(this.machineLis, data.id, { ...data, macStatus: status })
      console.log(`MachineStatus eventbus on:`, this.machineLis)
      this.currentMac = data.id
    })
  },
  activated() {
    console.log('call activated')
  },
  deactivated() {
    console.log('call deactivated')
  },
  methods: {
    handleMachineSelected(inx) {
      this.currentMac = inx
    },

    onWorkshopSelected(inx) {
      this.currentWorkshop = inx
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.page-warp {
  padding: 10px 20px;
  box-sizing: border-box;
}

.top-wrap {
  display: flex;
  align-items: center;
}
.workshop-list {
  padding: 12px 0px;
  // border-bottom: 1px #e1e1e1 solid;
  display: flex;
  align-items: center;
  .workshop-list-item {
    margin-right: 8px;
    // border: 1px #409eff solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    padding: 4px 8px;
    box-sizing: border-box;
    .icon {
      margin-right: 4px;
    }
    .label {
      font-size: $h2;
    }
  }
  .active {
  }
}
.main-wrap {
  width: 100%;
  display: flex;
  border-top: 1px solid #eee;
}

.machine-list {
  display: flex;
  flex-wrap: wrap;
  .machine {
    display: flex;
    width: 240px;
    height: 80px;
    flex-shrink: 0;
    // flex: 1;
    padding: 6px;
    .machine-inner {
      width: 220px;
      height: 100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);
      border-radius: 6px;
      padding: 6px;
      display: flex;
      box-sizing: border-box;
      .status {
        width: 10px;
        height: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);
        border-radius: 6px;
      }
      .left {
        width: 60px;
        display: flex;
        flex-direction: column;
        .img {
          width: 50px;
          height: 30px;
          background-size: 100% 100%;
          background-image: url('~@/assets/images/machine-tag.png');
        }
        .machineNo {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: $h2;
          color: $light-blue;
          font-weight: bold;
        }
      }
      .mid {
        letter-spacing: 0.5px;
        flex: 1;
        .variety {
          color: #555;
          font-size: $h3;
          font-weight: bold;
        }
        .production {
          color: #777;
          margin-top: 4px;
          font-size: $h3;
        }
      }
      .right {
        width: 10px;
        .status {
          width: 100%;
          height: 100%;
          background: red;
        }
      }
    }
  }
}

.state-tips {
  position: absolute;
  right: 20px;
  top: 8px;
  font-size: $h2;
  display: flex;
  align-items: center;
  .color-tag {
    width: 38px;
    height: 14px;
    margin: 0 6px 0 4px;
  }
}

.machine-detail {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  .machine-group {
    display: flex;
    flex-wrap: wrap;
    .opt {
      display: flex;
      align-items: center;
      width: 25%;
      padding: 16px 0 4px 0;
      .left {
        font-size: 15px;
        color: #777;
        font-weight: bold;
      }
      .right {
        font-size: 14px;
        margin-left: 6px;
        color: #777;
      }
    }
  }
}
</style>
